To Enable Frontend Developers to Enter 3D Printing: I Built a 3MF Exporter for Three.js
Introduction
As web technologies continue to evolve, the line between digital and physical creation is becoming increasingly blurred. When I started working on Bekuto3D, a tool for converting SVG files to 3D models, I discovered a significant gap in the Three.js ecosystem: the lack of a reliable 3MF exporter.
The Problem
Three.js is the go-to library for 3D rendering on the web, but when it came to bridging the gap to 3D printing, the options were limited. While Three.js includes an STL exporter, this format lacks critical features needed for modern 3D printing workflows:
- No color support
- No multi-material capabilities
- No metadata for print settings
- Limited compatibility with popular slicers like BambuStudio
3MF (3D Manufacturing Format) solves these problems as an open standard designed specifically for 3D printing, but Three.js had no built-in support for exporting to this format.
The Solution: three-3mf-exporter
To address this gap, I created three-3mf-exporter, a library that enables seamless export of Three.js models to the 3MF format.
Key features include:
- Simple integration with existing Three.js projects
- Support for multiple materials and colors
- Automatic model centering on the print bed
- BambuStudio compatibility
- Customizable print settings
- Preservation of model names and hierarchy
Implementation Example
Basic usage is straightforward:
import { exportTo3MF } from 'three-3mf-exporter'
// Parse the three.js object and generate the 3MF encoded output
const blob = await exportTo3MF(mesh)
// Download the file
const url = URL.createObjectURL(blob)
const link = document.createElement('a')
link.href = url
link.download = 'model.3mf'
link.click()For more advanced use cases, you can specify printer-specific settings:
const blob = await exportTo3MF(meshOrGroup, {
printer_name: 'Bambu Lab A1',
filament: 'Bambu PLA Basic @BBL A1',
printableWidth: 256,
printableDepth: 256,
printableHeight: 256,
printerSettingsId: 'Bambu Lab A1 0.4 nozzle',
printSettingsId: '0.20mm Standard @BBL A1',
})The Development Journey
Developing this exporter was an interesting challenge. The 3MF specification is comprehensive but implementing it required understanding both the Three.js object structure and the XML-based 3MF format requirements.
I initially created this exporter specifically for Bekuto3D, which needed a way to export colorful 3D models directly to consumer-grade FDM printers. As development progressed, I realized this tool could benefit the broader Three.js community.
Future Directions
This is my first iteration of the exporter, and there's always room for improvement. Some areas I'm looking to enhance:
- Support for more advanced 3MF features like beam lattices
- Optimization for large models
- Enhanced compatibility with more slicers
- Better compression for smaller file sizes
Conclusion
By bridging the gap between Three.js and 3D printing with this 3MF exporter, I hope to make physical manufacturing more accessible to web developers. What started as a solution for my own project has evolved into a tool that I hope will enable more developers to explore the fascinating intersection of web development and 3D printing.
If you're working on a project that could benefit from this exporter, please give it a try. And if you encounter any issues or have suggestions for improvements, contributions to the project are always welcome.
Check out the full project at three-3mf-exporter or install it via npm: npm install three-3mf-exporter.
Happy printing!
絢香音